<template>
  <div class="box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <h3 style="display: inline">样例-{{ sampleId + 1 }}：</h3>
          <el-button class="button" type="primary" style="float:right;" round
                     @click="onClose">
            关闭
          </el-button>
        </div>
      </template>
      <div class="text-item" v-html="text"/>
      <el-divider/>
      <el-row v-loading="loading" element-loading-text="模型选择中" style="height: 120px">
        <div style="text-align: left">
          <span style="font-weight: bold">模型选择：</span>
          <el-button v-for="(each, index) in chooseConfidence"
                     :key="'choice-making-'+ name +'-task-card-' + cardIndex + '-candidate-' + index"
                     :type="chooseButtonType[index]"
                     :icon="chooseButtonIcon[index]"
                     style="margin-bottom: 10px"
          >
            {{ candidates[index] }}({{ (each * 100).toFixed(2) + '%' }})
          </el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "ChoiceMakingTaskCard",
  data() {
    return {
      makeChoice: false,
      loading: true,
      chooseButtonType: [],
      chooseButtonIcon: [],
      chooseConfidence: [],
      predict: ''
    }
  },
  props: {
    sampleId: Number,
    text: String,
    candidates: {
      type: Array,
      default: () => []
    },
    cardIndex: Number,
    answer: String,
    namespace: String,
    name: String
  },
  mounted() {
    this.changeSampleLoading = true
    this.axios.get('/' + this.namespace, {
      params: {
        index: this.sampleId
      }
    }).then(response => {
      this.chooseConfidence = response.data.confidences
      this.predict = response.data.predict
      let predictIndex = -1
      this.chooseButtonIcon = []
      this.chooseButtonType = []

      for (let i = 0; i < this.candidates.length; ++i) {
        if (this.candidates[i] === this.predict) {
          predictIndex = i
        }
        if (this.candidates[i] === this.answer) {
          this.chooseButtonIcon.push('el-icon-check')
          this.chooseButtonType.push('success')
        } else {
          this.chooseButtonIcon.push('el-icon-close')
          this.chooseButtonType.push('info')
        }
      }
      if (this.predict !== this.answer) {
        this.chooseButtonIcon[predictIndex] = 'el-icon-close'
        this.chooseButtonType[predictIndex] = 'danger'
      }
      this.loading = false
    }).catch(err => {
      ElMessage('获取选择填空' + this.name + '预测' + this.sampleId + '失败, 详情见控制台')
      console.log(err)
      this.changeSampleLoading = false
    })
  },
  methods: {
    onClose() {
      this.$emit('close')
    },
  }
}
</script>

<style scoped>
.box {
  box-shadow: 0 6px 8px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
  padding: 5px 10px 10px 10px;
}

.card-header {
  text-align: left;
}

.text-item {
  text-align: left;
}
</style>